<template>
  <div style="height: 100%">
    <div>
      <TopFilter ref="topFilter" :list="formList" :cols="4" :labelWidth="100" :collapse="true" @onCollapse="collapseHandle" @filterChange="handleFilterChange" />
    </div>

    <el-row style="display: flex; flex-direction: column">
      <el-row style="height: 100%">
        <el-col style="width: 17%; padding: 5px 3px;">
          <div class="menu-header" style="margin-top: -5px; margin-bottom: 5px;">备件</div>
          <el-scrollbar style="background-color: #fff;">
            <el-col style="padding: 5px 3px">
              <Spin :spinning="loadingTree" tip="Loading...">
                <el-tree style="height: 671px;" :data="treeData" :indent="0" :highlight-current="true" @node-click="handleNodeClick" node-key="model" :default-expanded-keys="['model']">
                  <span class="span-ellipsis" slot-scope="{ node, data }">
                    <el-tooltip :disabled="disabled" class="item" effect="dark" :content="node.label || ''" placement="top-start">
                      <span> {{ node.label }}</span>
                    </el-tooltip>
                  </span>
                </el-tree>
              </Spin>
            </el-col>
          </el-scrollbar>
        </el-col>
        <el-col style="width: 40%">
          <div class="menu-header">列表</div>
          <el-scrollbar>
            <el-col style="padding: 5px 3px">
              <div>
                <div style="text-align: center" v-loading="rangeloading">
                  <el-row>
                    <el-col style="padding-top: 10px; padding-left: 5px; background-color: #fff;">
                      <!-- <TopFilter :isSubmitBtn="false" ref="seach" :list="searchList" :cols="5" :labelWidth="50" :collapse="false"/> -->
                      <el-form :inline="true" style="float: left" label-width="40px" id="inputClass">
                        <el-form-item label="检索">
                          <el-input width="100" @input="seachOnInput" v-model="input" placeholder="请输入..." />
                        </el-form-item>
                      </el-form>
                      <el-button v-show="this.editBut&&this.editButShow" size="small" type="primary" style="float: right; margin-right: 20px;" @click="openUpdateView()"> 热点编辑 </el-button>
                    </el-col>
                  </el-row>
                  <FilterTable
                    :onSyncTableData="tableList"
                    ref="sbuTable"
                    :columns="columns"
                    :fetchapi="fetchApi"
                    :params="fetchParams"
                    height="375px"
                    maxHeight="375px"
                    :datakey="'records'"
                    :onRowSelectChange="selectChange"
                    selectionType="single"
                    :defaultSelections="selectedRow"
                    :isToperInfo="false"
                    :isPagination="false"
                    :isColumnFilter="false"
                    :onColumnsChange="(columns) => (this.columns = columns)"
                  >
                  </FilterTable>
                  <!-- <TopFilter :isSubmitBtn="false" ref="namefilter" :list="namefilter" :cols="2" :labelWidth="50" :collapse="false" /> -->
                  <!-- <el-button v-show="this.editBut" size="mini" type="text" @click="openUpdateView()">
                    热点编辑
                  </el-button> -->

                    <Spin :spinning="loadingFull" tip="Loading...">
                      <div style="background-color: #fff; padding-top: 12px;height: 232px;">
                        <FormPanel v-show="divInfo" style="margin-right: 10px; margin-top: 10px" :cols="2" ref="formPanel" :list="formInfoList" labelWidth="75" :isSubmitBtn="false"> </FormPanel>
                      </div>
                    </Spin>

                </div>
              </div>
            </el-col>
          </el-scrollbar>
        </el-col>
        <el-col style="width: 43%; float: right">
          <div class="menu-header">展示</div>
          <el-scrollbar style="padding: 5px 3px;">
            <Spin :spinning="loadingImg" tip="Loading...">
              <el-col>
                <div id="divFater" span="8">
                  <div id="divTest" v-show="imgK"></div>
                  <img id="img" v-show="imgK" :src="pics" ref="imgDiv" @mousedown="move" />
                  <!-- <el-button style="position: absolute;z-index: 10;" align="center" :type="tn" size="mini" @click="big(scale)">放大</el-button> -->
                  <!-- <el-button style="position: absolute;z-index: 10;left: 70px;" align="center" :type="tn" size="mini" @click="small(scale)">缩小</el-button> -->
                </div>
              </el-col>
              <el-col style="padding-bottom: 5px">
                <el-col style="padding: 0px 0px; height: 66px; background-color: #fff">
                  <div style="width: 130px; margin: auto">
                    <el-button size="mini" type="info" icon="el-icon-plus" circle @click="big(scale)"></el-button>
                    <el-button size="mini" type="info" icon="el-icon-minus" circle @click="small(scale)"></el-button>
                    <el-button size="mini" type="info" icon="el-icon-refresh-right" circle @click="reset()"></el-button>
                  </div>
                </el-col>
              </el-col>
            </Spin>
          </el-scrollbar>
        </el-col>
      </el-row>
    </el-row>
    <BaseDialog
      style="min-height: 100vh"
      :visible.sync="showupdatePart"
      width="1100px"
      title="热点编辑"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '50px' }"
    >
      <HotspotUpdate v-if="showupdatePart" @closed="off" :assemblyId="assemblyId" :graphicId="graphicId" :graphicCode="graphicCode"></HotspotUpdate>
    </BaseDialog>

    <!-- 查看详情抽屉 -->
    <Drawer :visible.sync="visibleDrawer" :title="title" :width="1000" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <HotsPotPartInfo :type="handleType" :rowData="row" @close="infoClose" />
    </Drawer>

    <BaseDialog :visible.sync="issearch" :title="'图片详情'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ImageEdit :rowData="imgRowData" @close="dealercloseHandler" />
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import ImageEdit from './imageEdit';
import HotspotUpdate from './hotspotUpdate';
import HotsPotPartInfo from './hotsPotPartInfo.vue';
import { getFileGroup } from '@/api/graphic/hotspotEdit/index.js';
import config from '@/assets/js/config';
import axios from '@/api/fetch';
import { queryModel, querySystem, queryGraphicInFo, queryParts, queryGradeInFo } from '@/api/graphic/hotspotEdit/index.js';
import { getAppId } from '@/assets/js/auth';
export default {
  name: 'Rolemanage',
  mixins: [dictionary],
  components: {
    HotspotUpdate,
    HotsPotPartInfo,
    ImageEdit,
  },
  props: {
    editButShow: { type: Boolean, default: true }
  },
  filters: {
    ellipsis(value, len) {
      if (!value) return '';
      if (value.length > len) {
        return value.slice(0, len) + '...';
      } else {
        return value;
      }
    },
  },
  data() {
    return {
      editBut:false,
      handleType: '',
      title: '',
      type: 'show',
      divInfo: true,
      loadingImg: false,
      loadingFull: false,
      loadingTree:false,
      visibleDrawer: false,
      disabled: false,
      issearch: false,
      treeShow: true,
      input: '',
      formInfoList: this.createFormInfoList(),
      hotspotImg: false,
      listShow: true,
      model:[],//车型
      modelName:undefined,//车型名称
      tableInfo: [], //传递给子组件中的数据
      showupdatePart: false,
      uploadPrefix: config.uploadUrl, // 附件上传前缀
      pics: '',
      columns: this.createTableColumns(),
      fetchParams: { xhrAbort: true },
      fetchApi: queryParts,
      data: [],
      assemblyId: undefined, //总成或备件id
      graphicCode: undefined, //代码
      graphicId: undefined, //图解id
      selectedRow: [], //选中的行
      dataSource: [],
      pointSize: 15,
      row: "", //点击查看详情时带过去的数据
      imgRowData: {},
      searchList: this.createSearchList(),
      formList: this.createFormList(),
      namefilter: this.createNameFilter(),
      loading: false,
      rangeloading: false,
      afterSale: '',
      treeData: [],
      treeNodeList: [],
      scale: 0.95, //图片放大缩小的指数
      systemList: [], //系统list
      assembly: [], //总成/备件lsit
      banMa: [],
      pointSize: 15,
      tableData: [],
      fixedWidth: undefined, //图片的固定宽度
      fixedHeight: undefined, //图片的固定高度
      minWidth: 379,
      minHeight: 358,
      imgK: false,
    };
  },
  computed: {},
  created() {
    this.getCookie();
  },
  mounted() {
    let img = document.getElementById('img');
    let w = img.width;
    let h = img.height;
  },
  methods: {
    createFormInfoList() {
      return [
        { type: 'INPUT', label: '代码', fieldName: 'bjxmbh', disabled: true },
        { type: 'INPUT', label: '名称', fieldName: 'bjzwmc', disabled: true },
        { type: 'INPUT', label: '单位', fieldName: 'bjdanw', disabled: true },
        { type: 'SELECT', label: '销售标识', fieldName: 'bjxsbz', disabled: true, itemList: this.createDictList('1004') },
        { type: 'INPUT', label: '服务商进价', fieldName: 'xs', disabled: true },
        { type: 'INPUT', label: '终端销售价', fieldName: 'ls', disabled: true },
        { type: 'INPUT', label: '备件类别', fieldName: 'partTypeName', disabled: true },
        { type: 'INPUT', label: '销售包装量', fieldName: 'bjxszx', disabled: true },
        { type: 'INPUT', label: '备注', fieldName: 'remark', disabled: true },
        {
          type: 'INPUT',
          render: (props) => {
            return (
              <div>
                <el-button disabled={this.row == ''} size="small" type="primary" style="float:left" onClick={() => this.editHandle()}>
                  查看详情
                </el-button>
              </div>
            );
          },
        },
      ];
    },

    //查看详情
    editHandle() {
      this.title = '详情';
      this.handleType = 'show';
      this.visibleDrawer = true;
    },
    //关闭查看详情页面
    infoClose(rData) {
      this.visibleDrawer = false;
      console.info(rData);
    },

    //查询热点并进行画点
    async getGradeInFo(assemblyId) {
      //查询坐标
      await queryGradeInFo({ assemblyId: assemblyId }).then((response) => {
        this.tableData = response.data;
        //根据坐标画标号
        for (let i = 0; i < this.tableData.length; i++) {
          this.createMarker(parseInt(this.tableData[i].gradeX), parseInt(this.tableData[i].gradeY), this.tableData[i].redianCode);
        }
      });
    },
    //行选中
    selectChange(val) {
      //设置taable的默认选中行
      this.selectedRow = val;
      if (val.length != 0) {
        //当选择数据是配件才发请求
        if (val[0].oneMenu != null && val[0].oneMenu != '') {
          //一级代码不为空一定是备件
          if (val[0].partInfoPo != null) {//partInfoPo不等于空，说明在table中选中的是备件
            this.formInfoList.forEach((x) => {
              if (x.fieldName == 'xs' || x.fieldName == 'ls') {
                if (val[0].partInfoPo[x.fieldName] != null && val[0].partInfoPo[x.fieldName] != '') {
                  x.initialValue = val[0].partInfoPo[x.fieldName].toFixed(2);
                } else {
                  x.initialValue = val[0].partInfoPo[x.fieldName];
                }
              } else {
                x.initialValue = val[0].partInfoPo[x.fieldName];
              }
            });
            this.row = val[0].partInfoPo;
          } else {
            this.row = '';
            this.formInfoList.forEach((x) => {
              x.initialValue = '';
            });
          }
        }
        //获取到所有的标号
        let divList = document.getElementById('divTest').getElementsByTagName('div');
         //让标号高亮
        for (let i = 0; i < divList.length; i++) {
          if (divList[i].getAttribute('redianCode') == val[0].redianCode) {
            divList[i].classList.remove('backCol2');
            divList[i].classList.add('backCol1');
          } else {
            divList[i].classList.remove('backCol1');
            divList[i].classList.add('backCol2');
          }
        }

        let rowArray = this.$refs.sbuTable.$refs.pageTable.list;
        let rowList = Array.from(this.$refs.sbuTable.$el.getElementsByClassName('el-table__row'));
        for (let i = 0; i < rowArray.length; i++) {
          if (rowArray[i].redianCode == val[0].redianCode) {
            rowList[i].style.backgroundColor = '#e6f7ff';
          } else {
            rowList[i].style.backgroundColor = '';
          }
        }
      }
    },
    //图片查看关闭
    dealercloseHandler(val) {
      this.issearch = false;
    },

    //搜索
    handleFilterChange(val) {
      this.divInfo = true;
      this.editBut = false;
      this.imgK = false;
      this.formInfoList.forEach((x) => {
        x.initialValue = '';
      });
      this.treeData = [];
      this.$refs.sbuTable.$refs.pageTable.list = [];
      if (val.modelCode == undefined || val.modelCode == '') {
        this.$message.error('请先选择车型!');
      } else {
        this.$set(val, 'appId', getAppId());
        this.loadingTree=true;
        //查询树形图数据
        queryGraphicInFo(val).then((response) => {
          if (response.data != null) {
            this.treeShow = true;
            this.treeData = [];
            this.systemList = response.data.system;
            this.assemblyList = response.data.assembly;
            //对数据进行格式化、整理
            this.searchTree();
            //默认展开第一个节点
            this.loadingTree=false;
          }
        });
      }
    },
    //查询下拉车型
    listModel() {
      let res = [];
      queryModel({ appId: getAppId() }).then((response) => {
        if (response.data.length > 0) {
          response.data.forEach((x) => {
            res.push({ text: x.modelName, value: x.modelCode });
          });
        }
      });
      return res;
    },
    //查询下拉系统
    listSystem(code) {
      if (code == '' || code == undefined) {
      } else {
        querySystem({ modelCode: code, appId: getAppId() }).then((response) => {
          if (response.data.length > 0) {
            response.data.forEach((x) => {
              this.formList[1].itemList.push({ text: x.systemName, value: x.systemCode });
            });
          }
        });
      }
    },
    //点击查看详情
    editImg(row) {
      this.imgRowData = row;
      this.issearch = true;
    },

    //检索
    seachOnInput(val) {
      if (val == '' || val == undefined) {
        this.$refs.sbuTable.$refs.pageTable.list = this.treeNodeList;
        return;
      }
      let list = this.treeNodeList;
      let dList = [];
      for (let i = 0; i < list.length; i++) {
        let flag1 = list[i].graphicName.includes(val);
        let flag2 = list[i].redianCode.includes(val);
        let flag3 = list[i].graphicCode.includes(val);
        let flag4 = list[i].unitAmount.includes(val);
        if (flag1 || flag2 || flag3 || flag4) {
          dList.push(list[i]);
        }
      }
      this.$refs.sbuTable.$refs.pageTable.list = dList;
    },

    tableList(e) {
      //table每次渲染完数据根据treeNodeList的长度判断是否赋值-->treeNodeList每次点击树节点时会清空
      //保证treeNodeList每次都是点击的节点中的数据
      if (this.treeNodeList.length == 0) {
        this.treeNodeList = e;
      }
    },

    //车型发生变化后触发的方法
    modeOnChange(val) {
      this.formList.forEach((x) => {
        if (x.fieldName == 'systemCode') {
          x.initialValue = '';
          x.itemList = [];
        }
      });
      this.listSystem(val);
    },

    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    //关闭编辑
    off(e) {
      if (e) {
        this.showupdatePart = false;
      }
      this.reset(this.graphicId);
    },

    //点击编辑热点
    openUpdateView() {
      this.tableInfo = this.$refs.sbuTable.$refs.pageTable.list;
      this.showupdatePart = true;
    },

    //画点
    createMarker(x, y, z) {
      let that = this;
      var div = document.createElement('div');
      div.className = 'marker';
      div.id = 'marker' + this.tableData.length;
      y = y - this.pointSize / 2;
      x = x - this.pointSize / 2;
      div.style.width = '20px';
      div.style.height = '20px';
      div.innerText = z;
      div.style.lineHeight = '20px';
      div.style.color = '#033051';
      div.style.textAlign = 'center';
      div.classList.add('backCol2');
      div.style.borderRadius = '50%';
      div.style.position = 'absolute';
      div.style.left = x + 'px';
      div.style.top = y + 'px';
      div.style.zIndex = 10;
      div.style.cursor = 'pointer';
      div.setAttribute('fixedLeft', x);
      div.setAttribute('fixedTop', y);
      div.setAttribute('redianCode', z);
      document.getElementById('divTest').appendChild(div);
      div.addEventListener('mousedown', this.down, false);
    },

    //点击标号
    down(e) {
      this.selectedRow = [];
      let redianCode = e.target.getAttribute('redianCode');
      //行选中
      let val = this.$refs.sbuTable.$refs.pageTable.list;
      let rowList = Array.from(this.$refs.sbuTable.$el.getElementsByClassName('el-table__row'));
      for (let i = 0; i < val.length; i++) {
        if (val[i].redianCode == redianCode) {
          this.selectedRow = [val[i]];
          rowList[i].scrollIntoView();
          break;
        }
      }
      //获取到所有的标号
      let divList = document.getElementById('divTest').getElementsByTagName('div');
       //让标号高亮
      for (let i = 0; i < divList.length; i++) {
        if (divList[i].getAttribute('redianCode') == redianCode) {
          divList[i].classList.remove('backCol2');
          divList[i].classList.add('backCol1');
        } else {
          divList[i].classList.remove('backCol1');
          divList[i].classList.add('backCol2');
        }
      }
    },

    // 拖动图片
    move(e) {
      let odiv = e.target;
      e.preventDefault();
      // 获取元素
      let list = [];
      let divTest = document.getElementById('divTest');
      var x = e.clientX - e.target.offsetLeft;
      var y = e.clientY - e.target.offsetTop;
      // 添加鼠标移动事件
      document.onmousemove = (e) => {
        //图片移动
        odiv.style.left = e.clientX - x + 'px';
        odiv.style.top = e.clientY - y + 'px';
        divTest.style.left = e.clientX - x + 'px';
        divTest.style.top = e.clientY - y + 'px';
      };

      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    //图片还原
    reset() {
      let img = document.getElementById('img');
      let divTest = document.getElementById('divTest');
      divTest.innerHTML = '';
      img.width=this.fixedWidth;
      img.height=this.fixedHeight;
      img.style.top = '0px';
      img.style.left = '120px';
      divTest.style.top = '0px';
      divTest.style.left = '120px';
      this.getGradeInFo(this.assemblyId);
    },
    //图片放大
    big(n) {
      let img = document.getElementById('img');
      let divTest = document.getElementById('divTest');
      let w = img.width;
      let h = img.height;
      img.width = img.width / n;
      img.height = img.height / n;
      let dw = img.width / w;
      let dh = img.height / h;
      let divList = document.getElementById('divTest').getElementsByTagName('div');
      for (let i = 0; i < divList.length; i++) {
        let dx = divList[i].offsetLeft * dw;
        let dy = divList[i].offsetTop * dh;
        divList[i].style.left = dx + 1 + 'px';
        divList[i].style.top = dy + 'px';
      }
    },
    //图片缩小
    small(n) {
      let img = document.getElementById('img');
      let divTest = document.getElementById('divTest');
      let w = img.width;
      let h = img.height;
      if (img.width > this.fixedWidth && img.height > this.fixedHeight) {
        img.width = img.width * n;
        img.height = img.height * n;
        let dw = img.width / w;
        let dh = img.height / h;
        let divList = document.getElementById('divTest').getElementsByTagName('div');
        for (let i = 0; i < divList.length; i++) {
          let dx = divList[i].offsetLeft * dw;
          let dy = divList[i].offsetTop * dh;
          divList[i].style.left = dx - 1 + 'px';
          divList[i].style.top = dy + 'px';
        }
      }
    },

    async handleNodeClick(data) {
      //把table下面的input清空
      this.row = '';
      this.formInfoList.forEach((x) => {
        x.initialValue = '';
      });
      this.assemblyId = data.assemblyId;
      this.graphicCode = data.graphicCode;
      this.graphicId = data.graphicId;
      //每次点击树节点把treeNodeList设置为空
      this.treeNodeList = [];
      this.listShow = true;
      let tableList = [];
      if (data.children == undefined) {
        this.$refs.sbuTable.$refs.pageTable.list = [];
      }
      if (data.oneMenu != null && data.oneMenu != '' && data.isSpare == 10041002) {
        //点击的是总成或者备件总成
        await getFileGroup({ xtdjid: data.assemblyId, xtfjlx: 'tt_graphic_assembly_info' }).then((response) => {
          if (response.data.length > 0) {
            this.getPicUrl(response.data[0].url).then((res) => {
              this.loadingImg = true;
              this.pics = res;
              let img = document.getElementById('img');
              let divTest = document.getElementById('divTest');
              divTest.innerHTML = '';
              let Timg = new Image();
              Timg.src = this.pics;
              Timg.onload = () => {
                // 为什么要写 onload  是因为要等他加载完之后才能获取到图片宽高
                //设置图片初始高度
                this.fixedHeight = Timg.height;
                if (this.fixedHeight > 600) {
                  this.fixedHeight = 600;
                }
                img.height = this.fixedHeight;
                img.width = this.fixedHeight == 600 ? Timg.width * (600 / Timg.height) : Timg.width;
                //设置图片初始宽度
                this.fixedWidth = img.width;

                //重新设置盒子的大小
                let divTest = document.getElementById('divTest');
                divTest.style.width = img.width + 'px';
                divTest.style.height = img.height + 'px';

                // this.fixedWidth=Timg.width;
                // if(this.fixedWidth>600){
                //    this.fixedWidth=600;
                //  }
                // img.width=this.fixedWidth;
              };

              img.style.top = '0px';
              img.style.left = '120px';
              divTest.style.top = '0px';
              divTest.style.left = '120px';
              this.imgK = true;
              this.getGradeInFo(data.assemblyId);
              this.editBut = true;
              this.loadingImg = false;
              this.divInfo = true;
            });
          } else {
            //没有查到图片
            this.divInfo = true;
            this.imgK = false;
            this.editBut = false;
          }
        });
      } else {
        if (data.isSpare == 10041001) {
          //点击的节点是最底层
          this.divInfo = true;
          this.imgK = false;
          this.editBut = false;
        } else {
          //点击的节点是系统或者车型
          this.divInfo = false;
          this.imgK = false;
          this.editBut = false;
        }
      }
      if(data.model=="model"){//如果点击的节点是车型则不发请求，并且table数据重置为空
        this.$refs.sbuTable.$refs.pageTable.list = [];
      }else{//发请求查询table数据
        let params = Object.assign(
          {},
          { assemblyId: data.assemblyId, graphicId: data.graphicId, graphicCode: data.graphicCode, oneMenu: data.oneMenu, isSpare: data.isSpare, appId: data.appId },
          { xhrAbort: false }
        );
        this.fetchParams = params;
      }
    },
    getCookie() {
      let allCookie = document.cookie.split(';');
      allCookie.forEach((x) => {
        if (x.indexOf('afterSale') > -1) {
          this.afterSale = x.split('=')[1];
        }
      });
    },

    async getPicUrl(url) {
      let actionUrl = this.uploadPrefix + '/api/file/download/url?fileUrl=' + url;
      let res = await axios.post(actionUrl);
      return res.data;
    },

    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '车型',
          // fieldName: 'purchaseType',
          fieldName: 'modelCode',
          itemList: this.listModel(),
          placeholder: '请选择...',
          change: (val) => {
            this.modeOnChange(val);
          },
        },
        {
          type: 'SELECT',
          label: '系统',
          // fieldName: 'purchaseType',
          fieldName: 'systemCode',
          itemList: [],
          placeholder: '请选择...',
        },
        {
          type: 'INPUT',
          label: '物料代码',
          fieldName: 'graphicCode',
          placeholder: '请输入...',
          rules: [{ max: 20, message: '长度不能大于20个字符', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '物料名称',
          fieldName: 'graphicName',
          placeholder: '请输入...',
          rules: [{ max: 20, message: '长度不能大于20个字符', trigger: 'blur' }],
        },
      ];
    },

    createSearchList() {
      return [
        {
          type: 'INPUT',
          label: '检索',
          fieldName: 'purchaseCode',
          placeholder: '请输入...',
          onInput: (val) => {
            this.seachOnInput(val);
          },
        },
      ];
    },
    createNameFilter() {
      return [
        {
          type: 'INPUT',
          label: '代码',
          fieldName: 'graphicCode',
          disabled: true,
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '名称',
          fieldName: 'graphicName',
          disabled: true,
          placeholder: '',
        },
      ];
    },

    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width:50,
          align: 'center',
          render: (props) => {
            let but=false;
            if (props.row.oneMenu == "0") {
              but = false;
            } else {
              if(props.row.partInfoPo!=null){
                if((props.row.partInfoPo.hasPics!=null)&&(props.row.partInfoPo.hasPics==10041001)){
                  but = true;
                }else{
                  but = false;
              }
              }
            }
            return (
              <div>
                <el-button  v-show={but} type="text" size="medium" class="imgButton" icon="el-icon-picture" onClick={() => this.editImg(props.row)}>

                </el-button>
              </div>
            );
          },
        },
        {
          title: '编号',
          dataIndex: 'redianCode',
          width:50,
          align: 'center',
          sorter: true,
        },
        {
          title: '代码',
          dataIndex: 'graphicCode',
          align: 'center',
          sorter: true,
        },
        {
          title: '名称',
          dataIndex: 'graphicName',
          align: 'center',
          sorter: true,
        },
        {
          title: '用量',
          width: 50,
          dataIndex: 'unitAmount',
          align: 'center',
          sorter: true,
        },
        {
          title: '备注',
          width: 80,
          dataIndex: 'remark',
          align: 'center'
        },
      ];
    },

    //加载树:对json的格式的转化
    searchTree() {
      let objList=[];
      let dataArray = [];
      let _this = this;
      if (_this.assemblyList.length == 0) {
        let v1 = _this.formList[2].initialValue;
        let v2 = _this.formList[3].initialValue;
        if ((v1 == '' || v1 == undefined) && (v2 == '' || v2 == undefined)) {//如果总成及备件是空，并且查询条件没有输入备件名称或备件代码，就把该车型下的系统展示
          _this.systemList.forEach(function (systemData) {
            _this.modelName=systemData.modelName;//给车型名称赋值
            let objTemp = {
              label: systemData.systemName, //节点显示的字段
              graphicId: systemData.graphicId, //图解ID
              systemName: systemData.systemName, //系统代码
              systemName: systemData.systemName, //系统名称
              modelCode: systemData.modelCode, //车型代码
              appId: systemData.appId, //版本
              modelName: systemData.modelName, //车型名称
            };
              objList.push(objTemp);
          });
          let fater={
            label:_this.modelName,
            model:"model",
            children:objList
          }
          _this.treeData.push(fater);
          return;
        }
      }
      _this.assemblyList.forEach(function (data) {
        //  debugger;
        if (data.oneMenu == '0') {
          let objTemp = {
            label: data.graphicName, //节点显示的字段
            graphicId: data.graphicId, //图解ID
            assemblyId: data.assemblyId, //图解总成ID
            redianCode: data.redianCode, //热点编号
            graphicCode: data.graphicCode, //代码
            graphicName: data.graphicName, //名称
            unitAmount: data.unitAmount, //用量
            isSpare: data.isSpare, //是否是配件
            appId: data.appId, //版本
            oneMenu: data.oneMenu, //上级代码
            parentId: data.parentId, //父节点id
          };
          dataArray.push(objTemp);
        }
      });
      let list = _this.data2treeDG(_this.assemblyList, dataArray);
      //把总成放进系统里
      //遍历系统
      _this.systemList.forEach(function (systemData) {
        let flag = true;
        let objTemp;
        _this.modelName=systemData.modelName;//给车型名称赋值
        objTemp = {
          label: systemData.systemName, //节点显示的字段
          graphicId: systemData.graphicId, //图解ID
          systemName: systemData.systemName, //系统代码
          systemName: systemData.systemName, //系统名称
          modelCode: systemData.modelCode, //车型代码
          appId: systemData.appId, //版本
          modelName: systemData.modelName, //车型名称

          children: [],
        };
        //遍历处理好的总成树形结构
        list.forEach(function (data) {
          //判断该总成是否属于这个系统
          if (data.graphicId == systemData.graphicId) {
            objTemp.children.push(data);
            flag = false;
          }
        });
        //这边说明没有找到属于该系统下的总成
        if (flag) {
          let v1 = _this.formList[2].initialValue;
          let v2 = _this.formList[3].initialValue;
          //根据查询条件中是否输入了备件名称或备件代码来判断是否显示该系统
          if ((v1 == '' || v1 == undefined) && (v2 == '' || v2 == undefined)) {//显示该系统
            objTemp = {
              label: systemData.systemName, //节点显示的字段
              graphicId: systemData.graphicId, //图解ID
              systemName: systemData.systemName, //系统代码
              systemName: systemData.systemName, //系统名称
              modelCode: systemData.modelCode, //车型代码
              appId: systemData.appId, //版本
              modelName: systemData.modelName, //车型名称
            };
          } else {//不显示该系统
            objTemp = undefined;
          }
        }
        if (objTemp != undefined) {
          objList.push(objTemp);
        }
      });
      let fater={
        label:_this.modelName,
        model:"model",
        children:objList
      }
      _this.treeData.push(fater);
    },
    data2treeDG(datas, dataArray) {
      let _this = this;
      let finallyData = [];
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j];
        let childrenArray = [];
        let graphicCode = dataArrayIndex.graphicCode;
        for (let i = 0; i < datas.length; i++) {
          let data = datas[i];
          let oneMenu = data.oneMenu;
          if (oneMenu == graphicCode && dataArrayIndex.graphicId == data.graphicId) {
            //判断是否为儿子节点
            let objTemp = {
              label: data.graphicName, //节点显示的字段
              graphicId: data.graphicId, //图解ID
              assemblyId: data.assemblyId, //图解总成ID
              redianCode: data.redianCode, //热点编号
              graphicCode: data.graphicCode, //代码
              graphicName: data.graphicName, //名称
              unitAmount: data.unitAmount, //用量
              isSpare: data.isSpare, //是否是配件
              appId: data.appId, //版本
              oneMenu: data.oneMenu, //上级代码
              parentId: data.parentId, //父节点id
            };
            childrenArray.push(objTemp);
          }
        }
        dataArrayIndex.children = childrenArray;
        if (childrenArray.length > 0) {
          _this.data2treeDG(datas, childrenArray);
        }
      }
      return dataArray;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.backCol1 {
  background-color: #ea6868;
}
/deep/.backCol2 {
  background-color: #36c6d3;
}
/deep/#divFater {
  position: relative;
  height: 624px;
  background-color: #fff;

  overflow: hidden;
}
/deep/#img {
  position: absolute;
  /* border: 1px red solid; */
}
/deep/#divTest {
  position: absolute;
  width: 100%;
  height: 600px;
  /* border: 1px black solid; */
}

/*树悬浮框: 名字过长则显示...*/
/deep/.span-ellipsis {
  width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: auto;
  padding: 4px 2px;
  border-radius: 4px;
}

/*树字体*/
/deep/.el-tree-node,
/deep/.el-tree-node__label {
  white-space: nowrap;
  outline: 0;
  font-size: 8px;
  /* font-family: SimSun;
        font-weight: 400; */
  color: #666666;
}

/*tree虚线*/

/deep/.el-tree-node {
  position: relative;
  padding-left: 15px;
}
/deep/.el-tree-node__children {
  padding-left: 10px;
}
/deep/.el-tree-node :last-child:before {
  height: 38px;
}
/deep/.el-tree > .el-tree-node:before {
  border-left: none;
}
/deep/.el-tree > .el-tree-node:after {
  border-top: none;
}
/deep/.el-tree-node:before,
/deep/.el-tree-node:after {
  content: '';
  left: 0px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
/deep/.tree :first-child /deep/.el-tree-node:before {
  border-left: none;
}
/deep/.el-tree-node:before {
  border-left: 1px dashed #b3b3b3;
  bottom: 0px;
  height: 100%;
  top: -20px;
  width: 1px;
}
/deep/.el-tree-node:after {
  border-top: 1px dashed #b3b3b3;
  height: 20px;
  top: 17px;
  width: 12px;
}
/deep/.el-tree-node__content .is-leaf {
  margin-left: 0px;
}
/deep/.el-tree-node :last-child:before {
  height: 30px;
  line-height: 30px;
}

/*树悬浮框时:树选中颜色*/
/deep/.el-tree--highlight-current /deep/.el-tree-node.is-current > .el-tree-node__content {
  background-color: #fff;
}
/deep/.el-tree--highlight-current /deep/.el-tree-node.is-focusable > .el-tree-node__content {
  background-color: #fff;
}
/deep/.el-tree--highlight-current .is-current > .el-tree-node__content > .span-ellipsis {
  color: #409eff;
}
/deep/.table-wrapper /deep/.toper-card {
  display: none;
}
/deep/ .imgButton {
  position: absolute;
  top: -5px;
  left: 14px;
  font-size: 20px !important;
}
/deep/ .el-scrollbar__wrap {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
</style>
